<template>
	<view class="container">
		<!-- 搜索框 -->
		<u-sticky customNavHeight="0">
			<view class="u-flex u-flex-items-center search">
				<view class="u-flex u-flex-items-center u-flex-items-start search-input" @click="screenOpen">
					<u-icon size="20" color="#666666" name="search"></u-icon>
					<text class="search-text">筛选</text>
					<u-line color="#D7D7D7" direction="col" length="32rpx" margin="0 20rpx"></u-line>
					<u-input class="input" type="select" :clearabled="false" border="false" readonly />
				</view>
			</view>
		</u-sticky>
		<!-- 订单信息 -->
		<view class="order">
			<!-- 订单数量信息 -->
			<view class="order_number">
				<view class="time_interval">{{startTime}} - {{endTime}}</view>
				<view class="u-flex u-flex-items-center u-flex-between order_info">
					<view>
						<view class="digit Medium">{{orderList.amount}}</view>
						<view class="subtitle ">实收金额</view>
					</view>
					<view>
						<view class="digit Medium">{{orderList.count}}</view>
						<view class="subtitle">实收笔数</view>
					</view>
				</view>
			</view>
			<view class="order_detail">
				<view class="order_detail_text">订单明细</view>
				<view class="detail_top" v-for="(item,index) in dataList" :key="index" @click="toDetails(item)" v-if="dataList.length>0">
					<view class="u-flex u-flex-items-center u-flex-between bottom-margin">
						<view class="u-flex u-flex-items-center">
							<view class="money Medium">¥{{item.orderMoney}}</view>
							<view class="payment_type">{{item.type==101?'收顾客':'收店家'}}</view>
							<view v-if="item.paymentMethod==103" class="payment_type">POS</view>
						</view>
						<view class="u-flex u-flex-items-center">
							<text :class="['status',item.status == '105'?'status_refund':'']">{{item.status==105?'已退款':'支付成功'}}</text>
							<u-icon size="14" color="#999999" name="arrow-right"></u-icon>
						</view>
					</view>
					<block v-if="item.type==101">
						<view class="list_info">
							<text>收款顾客：</text>
							<text class="list_info_text">{{item.customerName}}</text>
						</view>
						<view class="u-flex list_info">
							<text>收款活动：</text>
							<view class="u-flex list_info_text">
								<text>{{item.storeName}}</text>
								<text style="margin-left: 40rpx;">{{item.activityStartTime?item.activityStartTime.substring(0, 10):''}}</text>
							</view>
						</view>
						<view class="list_info">
							<text>收款时间：</text>
							<text class="list_info_text">{{item.orderTime}}</text>
						</view>
					</block>
					<block v-if="item.type==102">
						<view class="list_info">
							<text>收款店面：</text>
							<text class="list_info_text">{{item.storeName}}</text>
						</view>
						<view class="list_info">
							<text>收款时间：</text>
							<text class="list_info_text">{{item.orderTime}}</text>
						</view>
					</block>
				</view>
				<view class="empty" v-if="dataList.length==0">
					<u--image src="/static/images/noDate.png" width="400rpx" height="304rpx"></u--image>
					<text>没有数据</text>
				</view>
			</view>
		</view>
		<u-popup :show="isScreenOpen" mode="bottom" @close="screenClose">
			<view class="screen">
				<view class="u-flex u-flex-items-center u-flex-between screen_header">
					<u-button :hairline="false" text="重置" color="#F2F2F2" :customStyle="{width:'120rpx',height:'56rpx',fontSize:'26rpx',borderRadius:'8rpx',color:'#666666',margin:'0'}" @click="selectReset"></u-button>
					<text class="screen_title">筛选</text>
					<u-button :hairline="false" text="确定" color="#4179FF" :customStyle="{width:'120rpx',height:'56rpx',fontSize:'26rpx',borderRadius:'8rpx',color:'#FFFFFF',margin:'0'}" @click="selectConfirm"></u-button>
				</view>
				<u-line color="#E1E1E1" length="672rpx" margin="0 auto"></u-line>
				<view class="u-flex u-flex-items-center screen_row">
					<view class="u-flex u-flex-center">
						<text class="name">顾客姓名：</text>
					</view>
					<view class="u-flex u-flex-center u-flex-end u-flex-fill">
						<u--input v-model="keyword" fontSize="26rpx" :customStyle="{flex:'1',color:'#333333'}" placeholder="请输入顾客姓名" placeholderStyle="color:#999999;" border="none" inputAlign="right"></u--input>
					</view>
				</view>
				<u-line color="#E1E1E1" length="672rpx" margin="0 auto"></u-line>
				<view class="u-flex u-flex-items-center screen_row">
					<view class="u-flex u-flex-items-center">
						<text class="name">收款时间：</text>
					</view>
					<view class="u-flex u-flex-items-center u-flex-end u-flex-fill" @click="dateOpen">
						<view class="u-flex u-flex-items-center u-flex-center date">
							<text class="text">{{startDate?startDate:'开始时间'}}</text>
							<uni-icons size="16" color="#999999" custom-prefix="iconfont" type="icon-rili"></uni-icons>
						</view>
						<u-line color="#888888" length="32rpx" margin="0 12rpx"></u-line>
						<view class="u-flex u-flex-items-center u-flex-center date">
							<text class="text">{{endDate?endDate:'结束时间'}}</text>
							<uni-icons size="16" color="#999999" custom-prefix="iconfont" type="icon-rili"></uni-icons>
						</view>
					</view>
				</view>
				<u-line color="#E1E1E1" length="672rpx" margin="0 auto"></u-line>
			</view>
		</u-popup>
		<u-calendar :show="isDateOpen" mode="range" :minDate="minDate" monthNum="12" color="#4179FF" :allowSameDay="true" @confirm="dateConfirm" @close="dateClose"></u-calendar>
	</view>
</template>

<script>
	import {
		getOrderList
	} from '@/config/api.js';
	export default {
		data() {
			const d = new Date()
			const year = d.getFullYear()
			let month = d.getMonth() + 1
			month = month < 10 ? `0${month}` : month
			const date = d.getDate()
			return {
				minDate: `${year}-${'01'}-${'01'}`,
				keyword: '', //搜索关键字
				orderList: {},
				dataList: [],
				page: 1, //页码
				limt: 20, //每页条数
				isScreenOpen: false,
				isDateOpen: false,
				startTime: `${year}/${month}/${date}`,
				endTime: `${year}/${month}/${date}`,
				startDate: '',
				endDate: ''
			};
		},
		onShow() {
			var that = this;
			that.getData('init');
		},
		onPullDownRefresh() {
			var that = this;
			that.initList();
			that.getData('init');
		},
		onReachBottom() {
			var that = this;
			that.getData('loadmore');
		},
		methods: {
			initList() {
				var that = this;
				that.page = 1;
				that.dataList = [];
			},
			screenOpen() {
				this.isScreenOpen = true;
			},
			screenClose() {
				this.isScreenOpen = false;
			},
			dateOpen() {
				this.isDateOpen = true;
			},
			dateClose() {
				this.isDateOpen = false;
			},
			dateConfirm(e) {
				var that = this;
				that.startDate = e[0];
				that.endDate = e[e.length - 1];
				that.dateClose();
			},
			// 获取数据
			getData(status) {
				var that = this;
				let page = status == 'loadmore' ? that.page + 1 : 1;
				let params = {
					token: that.vuex_token,
					startDate: that.startDate ? that.startDate : '',
					endDate: that.endDate ? that.endDate : '',
					customerName: that.keyword,
					pageNum: page,
					pageSize: that.limt
				};
				getOrderList(params).then(res => {
					that.orderList = res.data;
					if (res.data.rows.length > 0) {
						that.page = page;
						if (status == 'init') {
							that.dataList = res.data.rows;
						} else if (status == 'loadmore') {
							that.dataList = that.dataList.concat(res.data.rows);
						}
					} else {
						status == 'loadmore' && uni.$u.toast(res.msg);
					}
					uni.stopPullDownRefresh();
				}).catch(err => {
					console.log('getOrderList=', err);
					uni.stopPullDownRefresh();
				});
			},
			// 数据详情
			toDetails(item) {
				uni.$u.route({
					url: '/pages/refund/detailsPaySuccess/detailsPaySuccess?orderNo=' + item.orderNo
				});
			},
			// 搜索重置
			selectReset() {
				var that = this;
				that.keyword = '';
				that.startDate = '';
				that.endDate = '';
				that.initList();
				that.getData('init');
			},
			// 搜索确定
			selectConfirm() {
				var that = this;
				that.page = 1;
				that.dataList = [];
				if (uni.$u.test.isEmpty(that.startDate) === false && uni.$u.test.isEmpty(that.startDate) === false) {
					that.startTime = that.startDate.replace(/-/g, '/');
					that.endTime = that.endDate.replace(/-/g, '/');
				}
				that.getData('init');
				that.screenClose();
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F4F4F4;

		.container {
			.search {
				height: 100rpx;
				background: #4179FF;
				padding: 0 20rpx;

				.search-input {
					width: 100%;
					height: 70rpx;
					background: #FFFFFF;
					border-radius: 35rpx;
					padding: 0 20rpx;

					.search-text {

						font-size: 28rpx;
						color: #666666;
						vertical-align: middle;
					}

					.input {
						flex: 1;
						height: 40rpx;
						padding: 0 !important;
						color: #333333;
					}
				}
			}

			.order_number {
				background: #FFFFFF;
				border-radius: 12rpx;
				margin: 20rpx 20rpx 20rpx;
				padding: 0 20rpx 36rpx 20rpx;

				.time_interval {
					height: 80rpx;
					line-height: 80rpx;

					font-size: 26rpx;
					color: #333333;
					border-bottom: 1rpx solid #E1E1E1;
				}

				.order_info {
					margin: 37rpx 130rpx 0 100rpx;
					text-align: center;

					.digit {

						font-size: 48rpx;
						line-height: 52rpx;
						color: #333333;
						margin-bottom: 20rpx;
					}

					.subtitle {

						font-size: 28rpx;
						line-height: 32rpx;
						color: #666666;
					}
				}
			}

			.order_detail {
				position: relative;

				.order_detail_text {

					font-size: 30rpx;
					line-height: 34rpx;
					color: #333333;
					margin: 33rpx 40rpx 33rpx;
				}

				.detail_top {
					background: #FFFFFF;
					border-radius: 16rpx;
					padding: 48rpx 20rpx;
					margin: 0 20rpx 20rpx;

					.bottom-margin {
						margin-bottom: 4rpx;
					}

					.money {

						font-size: 40rpx;
						line-height: 44rpx;
						color: #333333;
					}

					.payment_type {
						border: 2rpx solid #DDDDDD;
						border-radius: 8rpx;

						font-size: 26rpx;
						line-height: 30rpx;
						color: #666666;
						padding: 7rpx 20rpx;
						margin-left: 20rpx;
					}

					.status {

						font-size: 28rpx;
						line-height: 32rpx;
						color: #00C25F;
						margin-right: 20rpx;
					}

					.status_refund {
						color: #F26809;
					}

					.list_info {
						margin: 28rpx 0 0;

						font-size: 28rpx;
						line-height: 32rpx;
						color: #888888;

						.list_info_text {
							max-width: 520rpx;
							color: #333333;
						}
					}
				}

				.empty {
					width: 400rpx;
					margin: 266rpx auto 0;
					position: relative;

					text {

						font-size: 28rpx;
						color: #888888;
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}

			.screen {
				height: 600rpx;

				.screen_header {
					height: 98rpx;
					padding: 0 40rpx;

					.screen_title {

						font-size: 28rpx;
						color: #333333;
						line-height: 32rpx;
					}
				}

				.screen_row {
					height: 92rpx;
					margin: 0 40rpx;

					.name {

						font-size: 28rpx;
						color: #333333;
						vertical-align: middle;
					}

					.date {
						width: 190rpx;
						height: 48rpx;
						border: 2rpx solid #DDDDDD;
						border-radius: 8rpx;
						text-align: center;

						.text {
							max-width: 120rpx;

							font-size: 28rpx;
							color: #888888;
							line-height: 52rpx;
							margin-right: 10rpx;
							white-space: nowrap;
							overflow-x: scroll;
						}
					}
				}
			}
		}
	}
</style>